<template>
  <div id="selectPatrolStandard">
    <div class="tree-table">
      <div class="tools">
        <el-form :model="seachForm" class="form-input-m" label-width="80px" :inline="true">
          <el-form-item>
            <el-input type="text" clearable v-model="seachForm.seachValue" placeholder="请输入查询关键字"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch()">查询</el-button>
          </el-form-item>
        </el-form>
        <vxe-table v-loading="loading" :row-config="{ keyField: 'id', isHover: true }" :data="standardList" ref="multipleTable" :column-config="{ resizable: true }" @checkbox-change="handleSelectionChange" @checkbox-all="handleSelectionAllChange">
          <vxe-column type="seq" width="70" align="center"></vxe-column>
          <vxe-column type="checkbox" width="20"></vxe-column>
          <vxe-column field="standardCode" title="巡检编号" align="center"></vxe-column>
          <vxe-column field="standardName" title="巡检名称" align="center"></vxe-column>
          <vxe-column field="standardType" title="巡检类型" align="center"></vxe-column>
          <vxe-column field="purpose" title="巡检目的" align="center"></vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
let { proxy }: any = getCurrentInstance();

let standardList: any = reactive([]);
let sltPatrolStandardList: any = reactive([]);
let multipleTable = ref(null);

let seachForm = reactive({
  seachValue: ''
});
let loading = ref(false);

onMounted(() => {
  findPatrolStandardList();
});
defineExpose({
  sltPatrolStandardList,
  setSltPatrolStandardList
});
function setSltPatrolStandardList(data: any) {
  sltPatrolStandardList.length = 0;
  sltPatrolStandardList.push(...data);
  findPatrolStandardList();
}

function findPatrolStandardList() {
  loading.value = true;
  standardList.length = 0;
  const url = '/api/eq/eqPollingStandard/findPollingStandardList';
  const data = {
    seachValue: seachForm.seachValue
  };
  proxy.$http
    .get(url, { params: data })
    .then((res: any) => {
      standardList.push(...res.data);
      // //遍历项目列表，勾选已选中的项目
      if (sltPatrolStandardList.length > 0) {
        const sltStandardList = [];
        for (const item of standardList) {
          if (item.pollingProjectList > 0) {
            for (const item of item.pollingProjectList) {
              item.standardName = '';
            }
          }
          if (sltPatrolStandardList.some((p: any) => p.id === item.id)) {
            //选中行
            sltStandardList.push(item);
            multipleTable.value.setCheckboxRow(item, true);
          }
        }
        sltPatrolStandardList.push(...sltStandardList);
      }
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
}

function handleSearch() {
  findPatrolStandardList();
}

function handleSelectionChange(checkedRows) {
  sltPatrolStandardList.length = 0;
  if (checkedRows.records.length > 0) {
    checkedRows.records.forEach((row) => {
      sltPatrolStandardList.push(row);
    });
  }
}
function handleSelectionAllChange(selection) {
  //如果全选中，遍历原有已选中的行，如果行已经选中，则继续下一个，否则添加到已选中的行
  if (selection.length > 0) {
    for (const row of selection) {
      const temp = sltPatrolStandardList.some((p: any) => p.id === row.id);
      if (!temp) {
        sltPatrolStandardList.push(row);
      }
    }
  } else {
    //如果取消全选，遍历原有已选中的行，如果行存在，则移除，否则下一个
    for (const row of standardList) {
      const idx = sltPatrolStandardList.findIndex((p: any) => p.id === row.id);
      if (idx > -1) {
        sltPatrolStandardList.splice(idx, 1);
      }
    }
  }
}
</script>
<style lang="scss">
#selectPatrolStandard {
  .tree-table {
    margin-top: 10px;
    display: flex;
    min-height: 400px;
    .tools {
      width: 100%;
      margin: 0;
      .el-form {
        margin-bottom: 0px;
      }
      .el-divider {
        width: 100%;
      }
      .el-divider--horizontal {
        margin: -20px 0 20px 0;
      }
      .el-divider__text {
        font-size: $font-size;
      }
      .el-dialog__body {
        padding-top: 20px;
      }
      .divider {
        width: 310px;
        .el-divider__text {
          font-weight: bold;
          font-size: $font-size;
        }
      }
    }
    .el-table {
      margin-bottom: 10px;
    }
  }
}
</style>
